const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = require('./paths');

/** @type { import('webpack').Configuration } */
module.exports = {
	// 入口
	entry: {
			index: './src/index.js'
	},
	module: {
		rules: [
			// 加载图片
			{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				include: paths.appSrc,
				type: 'asset/resource',
			},
			//加载字体
			{
				test: /.(woff|woff2|eot|ttf|otf)$/i,
				include: [
					 paths.appSrc,
				 ],
				type: 'asset/resource',
			},
			{
				test: /\.css$/,
				include: paths.appSrc,
				use: [
					// 将 JS 字符串生成为 style 节点
					'style-loader',
					// 将 CSS 转化成 CommonJS 模块
					'css-loader',
				],
			},
			{
				test: /.(scss|sass)$/,
				include: paths.appSrc,
				use: [
				// 将 JS 字符串生成为 style 节点
				'style-loader',
				// 将 CSS 转化成 CommonJS 模块
				'css-loader',
				// 将 Sass 编译成 CSS
				'sass-loader',
				],
			},
			{
				test: /\.module\.(scss|sass)$/,
				include: paths.appSrc,
				use: [
					// 将 JS 字符串生成为 style 节点
					'style-loader',
					// 将 CSS 转化成 CommonJS 模块
					{
						loader: 'css-loader',
						options: {
							// Enable CSS Modules features
							modules: true,
							importLoaders: 2,
							// 0 => no loaders (default);
							// 1 => postcss-loader;
							// 2 => postcss-loader, sass-loader
						},
					},
					// 将 PostCSS 编译成 CSS
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									[
										// postcss-preset-env 包含 autoprefixer
										'postcss-preset-env',
									],
								],
							},
						},
					},
					// 将 Sass 编译成 CSS
					'sass-loader',
				],
			},
			{
				test: /\.(js|jsx)$/,
				include: paths.appSrc,
				use: [
					{
						loader: 'esbuild-loader',
						options: {
							loader: 'tsx',
							target: 'es2015',
						},
					}
				]
			},
	],
  },
	// 生成html，自动引入bundle
	plugins: [
		new HtmlWebpackPlugin({
			title: 'webpack cli',
			template: paths.appHtml
		})
	]
}